import type { IMenuItem } from "~/types/manage";
import { cn } from "~/utils/ui.util";
import Menu from "./ui/menu";

interface Props {
  menuList: IMenuItem[];
  menuHeader?: React.ReactNode;
  className?: string;
  collapsed?: boolean; // 新增属性
}

export default function SideMenu(props: Props) {
  // 移除了内部的collapsed状态管理，使用外部传入的collapsed属性
  const collapsed = props.collapsed || false;

  return (
    <div
      className={cn(
        "flex h-screen flex-col overflow-hidden rounded-md shadow-xl transition-all duration-300",
        {
          "w-[60px] px-2 py-4": collapsed,
          "w-[220px] p-4": !collapsed,
        },
        props.className,
      )}
    >
      <div className="flex items-center justify-between">
        {props.menuHeader}
        {/* 移除了按钮，因为按钮将放在外部 */}
      </div>
      <div className="mt-2 flex flex-1 flex-col gap-2 overflow-auto">
        {props.menuList.map((item) => {
          return <Menu menu={item} key={item.path} collapsed={collapsed} />;
        })}
      </div>
    </div>
  );
}
